/*
  学习目标：兄弟组件 - 状态提升
  步骤：
  1. 把husband的状态提升到App，通过props传递回去

  2. 把增加状态的方法handleMakeMoney，提升到App并传递回去

  3. 定义消费的方法handleCost，传递到wife组件，并且调用即可
*/

import React, { Component } from 'react';
import Husband from './components/Husband';
import Wife from './components/Wife';

export default class App extends Component {
  state = {
    money: 1000,
  };
  /* 赚钱方法 */
  handleMakeMoney = () => {
    this.setState({ money: this.state.money + 1000 });
  };
  // 花费方法
  handleCostMoney = (num) => {
    this.setState({ money: this.state.money + num });
  };
  render() {
    return (
      <div>
        <h1 style={{ textAlign: 'center' }}>家庭存款：{this.state.money}</h1>
        <Husband
          money={this.state.money}
          handleMakeMoney={this.handleMakeMoney}
        ></Husband>
        <hr />
        <Wife
          money={this.state.money}
          handleCostMoney={this.handleCostMoney}
        ></Wife>
      </div>
    );
  }
}
